import {
  Component,
  ElementRef,
  QueryList,
  viewChild,
  ViewChild,
  ViewChildren,
} from '@angular/core';
import { NzCarouselModule } from 'ng-zorro-antd/carousel';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { FormsModule } from '@angular/forms';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzFlexModule } from 'ng-zorro-antd/flex';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { CardComponent } from '../component/card/card.component';
import { CountService } from '../services/count.service';
import { CommonModule } from '@angular/common';
import { CountPipe } from '../component/pipe/count.pipe';
import { Course } from '../component/card/course';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [
    NzCarouselModule,
    NzButtonModule,
    NzSegmentedModule,
    NzGridModule,
    FormsModule,
    NzCardModule,
    NzFlexModule,
    NzIconModule,
    CardComponent,
    CommonModule,
    CountPipe,
  ],
  templateUrl: './home.component.html',
  styleUrl: './home.component.less',
})
export class HomeComponent {
  // @ViewChild(CardComponent) child!: CardComponent;
  // @ViewChild('child') child: any;
  // @ViewChildren('child') child!: QueryList<ElementRef>;
  list = [
    {
      src: '../../assets/images/carousel/1.jpg',
    },
    {
      src: '../../assets/images/carousel/2.jpg',
    },
    {
      src: '../../assets/images/carousel/3.jpg',
    },
    {
      src: '../../assets/images/carousel/4.png',
    },
    {
      src: '../../assets/images/carousel/5.jpg',
    },
    {
      src: '../../assets/images/carousel/6.png',
    },
    {
      src: '../../assets/images/carousel/7.jpeg',
    },
  ];
  courseList: Course[] = [
    {
      type: '全部课程',
      children: [
        {
          name: "Unity最全最完整的零基础入门教程-Luna's Fantasy（露娜的大冒险）",
          url: 'https://www.sikiedu.com/files/course/2023/08-02/142256046fe1999314.jpg',
          count: 8454,
          comments: 66,
          isFree: true,
        },
        {
          name: 'Unity版植物大战僵尸：游戏制作完全指南',
          url: 'https://www.sikiedu.com/files/course/2023/12-22/1038113a58c4010564.png',
          count: 10062,
          comments: 15,
          isFree: true,
        },
        {
          name: 'Unity6零基础小白入门教程-2025最新版',
          url: 'https://www.sikiedu.com/files/course/2025/05-12/18115288e1d9397559.png',
          count: 1264,
          comments: 3,
          isFree: true,
        },
        {
          name: '零基础精通Unity数字孪生-智慧城市系统-第一季',
          url: 'https://www.sikiedu.com/files/course/2024/08-26/153453d4bd2c886091.png',
          count: 2981,
          comments: 6,
          isFree: true,
        },
        {
          name: '虚幻5.3零基础入门视频教程（蓝图版）-宇宙最简单系列',
          url: 'https://www.sikiedu.com/files/course/2024/03-18/09120773f40f783731.png',
          count: 3923,
          comments: 3,
          isFree: true,
        },
        {
          name: 'Cocos Creator3.8零基础小白入门教程',
          url: 'https://www.sikiedu.com/files/course/2024/05-21/1202146e635a677592.png',
          count: 2483,
          comments: 4,
          isFree: true,
        },
      ],
    },
    { type: 'Unity' },
    { type: '虚幻' },
    { type: 'Cocos' },
    { type: '独立游戏' },
    { type: 'Java' },
    { type: 'Python人工智能' },
    { type: '游戏美术' },
    { type: '前端' },
    {
      type: '微信小程序',
      children: [
        {
          name: '快速上手微信小程序UI框架',
          url: 'https://www.sikiedu.com/files/course/2020/09-02/132725d23094370998.png',
          count: 162,
          comments: 2,
          isFree: false,
          price: 240,
        },
      ],
    },
    { type: 'Linux运维' },
    { type: '单卖课' },
    { type: '大数据' },
    { type: '其他' },
  ];
  selectIndex: number = 0;
  options = ['最新', '最热', '推荐'];
  index: number = 1;
  courseInfo: any[] | undefined = [];

  constructor(private count: CountService) {
    this.courseInfo = this.courseList[0].children;
    // console.log('constructor', this.child);
  }
  ngOnInit() {
    // console.log('ngOnInit', this.child);
  }
  ngAfterViewInit() {
    // console.log('ngAfterViewInit', this.child);
  }
  ngOnChanges() {
    console.log(2);
  }
  ngOnDestroy() {
    console.log(4);
  }
  handleSelect(i: number, array?: any[]) {
    this.selectIndex = i;
    this.courseInfo = array;
  }
  getMessage(e: any) {
    console.log(e);
  }
  add() {
    // console.log('add', this.child);
    // this.child.addCount();
    this.count.addCount();
  }
}
